<template>
  <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body :close-on-click-modal="false">
    <el-form ref="form" :model="request" :rules="rules" size="small" label-width="110px" label-position="left" v-if="request">
      <el-form-item label="订单号：" prop="orderId">
        {{request.orderId}}
      </el-form-item>

      <el-form-item label="产品名称：" prop="productTitle">
        {{request.productTitle}}
      </el-form-item>

      <el-form-item label="用户邮箱：" prop="userEmail">
        {{request.userEmail}}
      </el-form-item>

      <el-form-item label="申请说明：" prop="remark">
        {{request.remark}}
      </el-form-item>

      <el-form-item label="状态：" prop="status">
        <el-radio-group v-model="request.status">
          <el-radio label="4">审核通过</el-radio>
          <el-radio label="3">拒绝申请</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="拒绝原因：" prop="reason" v-if="request.status==='3'">
        <el-input v-model="request.reason" type="textarea" :rows="10" placeholder="请输入拒绝原因" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="handleSubmit()">提 交</el-button>
      <el-button size="small" @click="handleCancel()">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateProductOrder } from '@/api/web/product.order.service.js'
export default {
  name: 'MdOrderAuditDialogComponent',
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      title: '订单审核',
      open: false,
      request: { ...this.data },
      rules: { ...requestRules }
    }
  },
  watch: {
    data: {
      handler (_data) {
        this.request = { ..._data }
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {

  },
  methods: {
    handleOpen () {
      this.open = true
    },
    handleCancel () {
      this.open = false

      const request = Object.assign({}, { ...this.request })

      const keys = Object.keys(request)
      if (keys.length > 0) {
        keys.forEach(key => {
          delete request[key]
        })
      }

      this.request = { ...request }
    },
    handleReset () {
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
    },
    handleSubmit () {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return false
        }

        try {
          const params = {
            orderId: this.request.orderId,
            status: this.request.status,
            reason: this.request.reason
          }

          await updateProductOrder(params)

          this.$message.success('提交成功')

          this.handleReset()

          this.handleCancel()

          this.$emit('refresh')
        } catch (error) {
          console.log(error)
        }
      })
    }
  }
}

const requestRules = {
  status: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
  reason: [{ required: true, message: '请输入拒绝原因', trigger: 'blur' }]
}
</script>

<style lang="less" scoped>
</style>